<template>
    <view class="chat">
        <scroll-view class="main" scroll-y="true" :scroll-top="scrollTop" :enable-flex="true" :scroll-with-animation="true">
            <view class="item" v-for="(item, index) in chatDataList" :key="index">
                <text class="date" v-if="isDate(index)">{{ item.date }}</text>
                <view class="info" :class="item.state == 1 ? 'info-R' : 'info-L'">
                    <view class="content bc-966" v-if="item.state == 1">{{ item.content }}</view>
                    <view class="icon-R"><u-icon v-if="item.state == 1" name="play-right-fill" :size="12"
                            color="#966BFF"></u-icon></view>
                    <up-image class="upImage" :src="item.avatar" width="90rpx" height="90rpx" radius="50"></up-image>
                    <view class="icon-L"><u-icon v-if="item.state == 0" name="play-left-fill" :size="12"
                            color="#fff"></u-icon></view>

                    <view class="content bc-fff" v-if="item.state == 0">{{ item.content }}</view>
                </view>
            </view>
        </scroll-view>
        <view class="group">
            <view class="voice"><u-icon name="mic" :size="18" color="#1F2225"></u-icon></view>
            <view class="input">
                <up-input border="none" suffixIcon="map-fill" suffixIconStyle="color: #1F2225" autoBlur
                    shape="circle"></up-input>
            </view>
            <view class="sendBtn"><u-icon name="mic" :size="18" color="#966BFF"></u-icon></view>
        </view>
    </view>

</template>

<script lang="ts" setup>
import { ref } from 'vue';

const scrollTop = ref(9999);
const chatDataList = ([
    { content: '你好，我是欢乐是帆幸福是船', state: 1, date: 1709796696, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '你好，我是欢乐是帆幸福是船', state: 0, date: 1709796696, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '好的', date: 1709796816, state: 0, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '卧室的吊灯，和衣帽间的吸顶 灯，还有床头上方的壁灯卧室的吊灯，和衣帽间的吸顶 灯，还有床头上方的壁灯', state: 1, date: 1709796819, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '好的', date: 1709796816, state: 0, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '卧室的吊灯，和衣帽间的吸顶 灯，还有床头上方的壁灯卧室的吊灯，和衣帽间的吸顶 灯，还有床头上方的壁灯', state: 1, date: 1709796819, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '好的', date: 1709796816, state: 0, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" },
    { content: '卧室的吊灯，和衣帽间的吸顶 灯，还有床头上方的壁灯卧室的吊灯，和衣帽间的吸顶 灯，还有床头上方的壁灯', state: 1, date: 1709796819, avatar: "https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" }
])

const isDate = (index: number) => {
    if (index == 0) {
        return true
    }
    if (chatDataList[index].date - chatDataList[index - 1].date < 120) {
        return false
    }
    return true
}
</script>

<style lang="scss" scoped>
.chat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;

    .main {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        background: #F8F8FA;
        /* min-height: calc(100vh - 120rpx); */
        overflow-y: overlay;
    }

    .group {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 20rpx;

        .voice {
            border: 4rpx solid #1F2225;
            border-radius: 50rpx;
            padding: 8rpx;
            margin-right: 20rpx;
        }

        .input {
            background-color: #F8F8FA;
            padding: 15rpx;
            border-radius: 50rpx;
            flex: 1;
        }

        .sendBtn {
            border: 2rpx solid #966BFF;
            border-radius: 50rpx;
            padding: 8rpx;
            margin-left: 20rpx;
        }
    }
}

.item {
    display: flex;
    flex-direction: column;

    .date {
        text-align: center;
        font-size: 30rpx;
        color: #A7AAA9;
        margin: 20rpx 0;
    }

    .info {
        display: flex;
        flex-direction: row;
        margin: 20rpx;

        .content {
            display: flex;
            align-items: center;
            border-radius: 10rpx;
            padding: 15rpx 20rpx;
            font-size: 35rpx;
            max-width: 450rpx;
            letter-spacing: 0.05em;
        }

        .icon-R,
        .icon-L {
            position: relative;
            top: 30rpx;
        }

        .icon-R {
            right: 10rpx;
        }

        .icon-L {
            left: 10rpx;
        }

        .bc-fff {
            color: #000;
            background-color: #fff;
        }

        .bc-966 {
            color: #fff;
            background-color: #966BFF;
        }
    }

    .info-R {
        justify-content: flex-end;
    }

    .info-L {
        justify-content: flex-start;
    }
}
</style>